<template>
  <!-- 表单验证
         1：表单元素值绑定
         2：el-form  model  rules
         3:el-form-item   prop对应表单元素的值的名字
         rules:{
          prop的值:[
          {required:true,message:信息,trigger:blur/change}
          {min:最小长度,max:最大长度,message:信息,trigger:blur/change}
          {pattern:正则,message:信息,trigger:blur/change}
          {validator:(rule,value,callback)=>{
            callback()通过
            callback(new Error(错误信息))不通过
          },trigger:blur/change}
          ]
         }
         全局表单验证
         1:el-form  ref="form"
         2: this.$refs.form.validate((result)=>{
          result:true/false
         })

    登录：
      1：定义登录的api
      2:导入登录api
      3:点击确定在表单验证通过后调用
      4：调用成功存储token

 -->
  <div
    v-loading="loading"
    class="login"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-form ref="form" class="form" :model="form" :rules="rules">
      <!-- <button @click="$store.commit('login/SETABC', Date.now())">
        修改abc
      </button> -->
      <div class="img">
        <img class="logo" src="@/assets/common/login-logo.png" alt="">
      </div>
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-lock"
          show-password
          @keyup.enter.native="submit"
        />
        <!-- keyup.enter:原生的方法
        原生的方法在组件标签上默认都是不可使用的
        el-button   @click="submit"
        this.$emit('click')
        .native:作用：让组件标签能够使用原生事件
         -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="submit">
          <span class="txt">登录</span>
        </el-button>
      </el-form-item>
      <p class="tip">帐号:13800000002 密码:123456</p>
    </el-form>
  </div>
</template>
<script>
// import { sysLogin } from '@/api/login'
export default {
  data() {
    return {
      loading: false,
      form: {
        mobile: '13800000002', //	string	必须		手机号
        password: '123456' //	string	必须		密码
      },
      rules: {
        mobile: [
          { required: true, message: '必填', trigger: 'change' },
          {
            pattern: /^1[3,9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ],
        // 密码要求6-12位
        password: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // try {
          //   const res = await sysLogin(this.form)
          //   console.log('密码错误', res)
          //   // 存储token到vuex
          //   this.$store.commit('login/SETTOKEN', res.data)
          //   // 成功了：提示登录成功
          //   this.$message.success('登录成功')
          // } catch (err) {
          //   console.log('err', err)
          // }
          this.loading = true
          try {
            await this.$store.dispatch('login/toLogin', this.form)
            this.$message.success('登录成功')
            // 跳转到首页
            this.$router.push('/')
          } finally {
            this.loading = false
          }

          /*
          常规做法
          1:看状态码，2开头的不用使用try catch  非2开头使用try catch
          2:2开头
             后端一定会有其它的参数值告诉你是否成功
             依据访参数值做处理就可以了
          实际开发：基本不搞这种做法
             问题：每个接口你都得写if  else
             响应拦截解决统一错误
          */
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped特性：只管当前组件和子组件的最外层
.login {
  height: 100%;
  background-image: url('~@/assets/common/login.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .form {
    width: 450px;
    .img {
      text-align: center;
      margin-bottom: 30px;
    }
    .btn {
      background-color: #417ffe;
      width: 100%;
      height: 50px;
      .txt {
        font-size: 22px;
      }
    }
    ::v-deep .el-input__inner {
      height: 50px;
    }
    .tip {
      color: #fff;
    }
  }
  ::v-deep .el-form-item__error {
    color: #fff;
  }
}
</style>
